<template>
	<view class="coupon-ticket">
		<view class="stickyTop" :style="'top:' + stickyTop + 'px'">
			<!-- 切换优惠券类型 -->
			<view class="coupon-nav-item" :class="{'active':item===currentNav}" v-for="(item,index) in navList"
				:key="index" @click="clickTab(item)">
				{{item}}
			</view>
		</view>

		<!-- 优惠券列表 -->
		<view class="coupon-ticket-body">

			<view class="coupon-ticket-item"
				:class="{'already-use': currentNav==='已使用'||currentNav==='已失效', 'lost-use': currentNav==='已失效'}"
				v-for="item in showData" :key="item.id">
				<view class="ticket-left-right">
					<!-- 左侧盒子 -->
					<view class="ticket-item-left" :data-text="item.kind">
						<!-- 优惠券抵扣价格 -->
						<view class="ticket-money">￥59</view>
						<!-- 使用说明 -->
						<view class="ticket-des" @click="openCurrentDes(item.id)">
							<text style="margin-right: 12rpx;">使用说明</text>
							<uni-icons :type="item.currentDes?'top':'bottom'" size="24rpx" color="#fff"></uni-icons>
						</view>
					</view>
					<!-- 右侧盒子 -->
					<view class="ticket-item-right">
						<!-- 优惠券名称 -->
						<view class="ticket-name">
							{{item.name}}
						</view>
						<!-- 优惠券有效期 -->
						<view class="ticket-time">
							2023.03.02 - 2023.03.02
						</view>
						<view class="ticket-action">
							<!-- 使用说明 -->
							<view class="">
								满119元可用
							</view>
							<!-- 优惠券的操作 -->
							<view class="btns">
								<view class="btn">
									去赠送
								</view>
								<view class="btn">
									去使用
								</view>
							</view>
						</view>
					</view>
					<!-- 上半圆 -->
					<view class="col-top" :class="{'show':item.currentDes}"></view>
					<!-- 下半圆 -->
					<view class="col-bottom"></view>
				</view>

				<!-- 规则说明 -->
				<view class="coupon-ticket-des" :class="{'show':item.currentDes}">
					使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则使用规则
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶
				stickyTop: 0,

				// nav三种状态
				navList: ['可使用', '已使用', '已失效', '赠送中', '已赠送'],

				currentNav: '可使用',

				// 展示数据
				showData: [{
					id: 1,
					kind: '购物券',
					name: '1商城购物专属优惠券商城购物专属优惠券',
					currentDes: false
				}, {
					id: 2,
					kind: '抽盒券',
					name: '1商城购物专属优惠券商城购物专属优惠券',
					currentDes: false
				}, {
					id: 5,
					kind: '抽盒券',
					name: '3商城购物专属优惠券商城购物专属优惠券',
					currentDes: false
				}, {
					id: 6,
					kind: '抽盒券',
					name: '3商城购物专属优惠券商城购物专属优惠券',
					currentDes: false
				}, {
					id: 7,
					kind: '抽盒券',
					name: '3商城购物专属优惠券商城购物专属优惠券',
					currentDes: false
				}]
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		},
		methods: {
			clickTab(item) {
				this.currentNav = item
			},
			// 打开使用说明
			openCurrentDes(id) {
				this.showData.forEach(i => {
					if (i.id === id) {
						i.currentDes = !i.currentDes
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-ticket {
		width: 100vw;
		padding-bottom: 100rpx;

		.stickyTop {
			position: sticky;
			display: flex;
			justify-content: space-between;
			width: 100vw;
			padding: 24rpx 30rpx;
			background: #fff;
			z-index: 99;

			.coupon-nav-item {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #999;

				&.active {
					color: #333;
					font-weight: 600;
				}
			}
		}

		.coupon-ticket-body {
			width: 690rpx;
			margin: 0 auto;
			color: #fff;

			// 优惠券项
			.coupon-ticket-item {

				.ticket-left-right {
					position: relative;
					display: flex;
					margin-top: 18rpx;
					border-radius: 16rpx;
					background: #2B2C3C;
					z-index: 1;

					// 左侧盒子
					.ticket-item-left {
						position: relative;
						width: 194rpx;
						height: 220rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #FF7803;
						text-align: center;

						// 优惠券类型
						&::before {
							content: attr(data-text);
							position: absolute;
							top: 0;
							left: 0;
							width: 90rpx;
							height: 38rpx;
							border-radius: 16rpx 0 16rpx 0;
							background: rgba(255, 255, 255, .1);
							font-size: 18rpx;
							line-height: 38rpx;
							text-align: center;
							color: #fff;
						}

						// 优惠券
						.ticket-money {
							margin: 66rpx 0 52rpx;
							font-size: 60rpx;
							font-weight: bold;
						}

						// 使用说明
						.ticket-des {
							margin-top: 16rpx;
							padding-top: 12rpx;
							font-size: 24rpx;
							font-weight: 500;
							line-height: 24rpx;
							color: #fff;
							opacity: .8;
						}
					}

					// 右侧盒子
					.ticket-item-right {
						width: 496rpx;
						height: 220rpx;
						padding: 0 18rpx 0 40rpx;
						box-sizing: border-box;

						// 优惠券名称
						.ticket-name {
							width: 380rpx;
							font-size: 28rpx;
							font-weight: 500;
							margin-top: 30rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}

						// 有效期
						.ticket-time {
							padding-top: 14rpx;
							font-size: 24rpx;
							color: rgba(255, 255, 255, .5);
						}

						// 优惠券的去使用
						.ticket-action {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 0;

							.btns {
								display: flex;
								justify-content: flex-end;

								.btn {
									width: 96rpx;
									border: 1px solid #FF7803;
									color: #FF7803;
									border-radius: 8rpx;
									font-size: 24rpx;
									font-weight: 500;
									text-align: center;
									line-height: 44rpx;
									box-sizing: border-box;
									margin-left: 20rpx;
								}
							}
						}
					}

					// 上半圆在下面
					.col-top {
						position: absolute;
						bottom: 0rpx;
						left: 176rpx;
						width: 32rpx;
						height: 16rpx;
						background: #f8f8f8;
						border-radius: 16rpx 16rpx 0 0;
						line-height: 16rpx;

						&.show {
							background: #80808A;
						}
					}

					// 下半圆在上面
					.col-bottom {
						position: absolute;
						top: 0rpx;
						left: 176rpx;
						width: 32rpx;
						height: 16rpx;
						background: #f8f8f8;
						border-radius: 0 0 16rpx 16rpx;
						line-height: 16rpx;
					}
				}

				// 使用说明
				.coupon-ticket-des {
					// height: 104rpx;
					height: 0;

					font-size: 24rpx;
					line-height: 40rpx;
					border-radius: 0 0 16rpx 16rpx;
					background: #80808A;
					box-sizing: border-box;
					overflow: hidden;

					&.show {
						transform: translateY(-10rpx);
						height: 104rpx;
						padding: 10rpx 30rpx;
					}
				}

				// 已使用样式
				&.already-use {
					position: relative;

					.ticket-left-right {
						.ticket-item-left {
							color: #D0D0D0;

							.ticket-des {
								margin-top: 60rpx;
								color: #999;
							}
						}

						.ticket-item-right {

							.ticket-action {
								.btns {
									display: none;
								}
							}
						}
					}

					&::after {
						position: absolute;
						top: 46rpx;
						right: 8rpx;
						content: '';
						display: block;
						width: 112rpx;
						height: 112rpx;
						background: url(https://showyoung.oss-cn-hangzhou.aliyuncs.com/bangbox/icon/already-use.png) no-repeat;
						background-size: 112rpx 112rpx;
						z-index: 1;
					}

					&.lost-use::after {
						background: url(https://showyoung.oss-cn-hangzhou.aliyuncs.com/bangbox/icon/lost-use.png) no-repeat;
						background-size: 112rpx 112rpx;
						z-index: 1;
					}
				}
			}
		}
	}
</style>
